<template>
	<view class="m-login-bar bottom">
		<u-transition :show="show" mode="fade-up">
		<view class="bar-warper flex-between p-sm p-l-md p-r-md">
			<view class="flex-start flex-warp-nowarp">
				<view v-if="appIcon">
					<image :src="appIcon" style="width: 75rpx;height:75rpx;flex: none;" class="site-icon border-25 m-r-md" >
				</view>
				<view>
					<view class="text-xs">{{$util.handleStr($t('login_bar.text-1'), appName)}}</view>
					<view class="text-xs text-secondary">{{$t('login_bar.text-2')}}</view>
				</view>
			</view>
			<u-button size="small" :text="$t('login.title')" shape="circle" :customStyle="{'background-color':'#ffd426','color':'#232426'}" @click="$util.go('auth/login')"></u-button>
			<view class="close-icon" @click="close">
				<m-icon name="close-line" color="#fff"></m-icon>
			</view>
		</view>
		</u-transition>
	</view>
</template>

<script>

	export default {
		name:"m-login-bar",
		props: {
			appName: {
				type: String,
				defalut: '',
				required: true,
			},
			appIcon: {
				type: String,
				defalut: '',
			}
		},

		data() {
			return {
				show:true
			};
		},
		methods: {
			close(){
				this.show = false
			}
		}
	}
</script>

<style lang="scss">
	.m-login-bar{
		position: fixed;
		z-index: 10;
		left: 0;
		width: 100%;
		.bar-warper{
			position: relative;
			background-color: rgba(0, 0, 0, .7);
			color: #fff;
			flex-wrap: nowrap;
			overflow: hidden;
			padding-right: 60rpx!important;
		}
		.site-icon{
			border: 1px solid #fff;
		}
		.u-button{
			width: 20%;
			margin: 0;
		}
		.close-icon{
			position: absolute;
			top: 0;
			right: 0;
			// background-color: rgba(0, 0, 0, .8);
			padding: 5px 5px;
			border-bottom-left-radius: 10px;
		}
	}
	// .m-login-bar.top{
	// 	top: 0;
	// }
	.m-login-bar.bottom{
		bottom: var(--window-bottom);
	}
</style>